@use "sass:map";

@import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';

$appearance: 'invert-neutral','neutral', 'primary', 'red', 'orange', 'blue', 'violet', 'pink', 'yellow', 'green';
$text-modes: 'accent', 'default', 'on-accent';
$link-surface: (
  'accent': 'background',
  'default': 'decor-default',
  'on-accent': 'accent-default',
);

.wrapper {
  resize: both;

  overflow: auto;
  display: flex;
  gap: 8px;
  align-items: center;

  width: 200px;
  height: 64px;
  margin-bottom: 16px;
  padding: 0 24px;

  border: 1px solid $sys-neutral-decor-default;
  border-radius: $dimension-050m;

  @each $text-mode in $text-modes {
    &[data-text-mode='#{$text-mode}'] {
      @each $appearance in $appearance {
        &[data-appearance='#{$appearance}'] {
          background-color: simple-var($theme-variables, 'sys', $appearance, map.get($link-surface, $text-mode));
        }
      }
    }  
  } 
}

$border-width: 0.5px;


.table {
  display: inline-grid;
  grid-template-columns: repeat(2, max-content);

  margin-right: 16px;

  background-color: $sys-neutral-background1-level;
  border: $border-width solid $sys-neutral-decor-default;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 8px;

  border: $border-width solid $sys-neutral-decor-disabled;

  @each $text-mode in $text-modes {
    &[data-text-mode='#{$text-mode}'] {
      @each $appearance in $appearance {
        &[data-appearance='#{$appearance}'] {
          background-color: simple-var($theme-variables, 'sys', $appearance, map.get($link-surface, $text-mode));
        }
      }
    }  
  } 
}


.headerCell {
  text-transform: uppercase;
}